<#systemSituation globalInfo="${globalInfo}"/>
<!-- widget grid -->
<section>

    <!-- row -->
    <div class="row">

        <!-- NEW WIDGET START -->
        <article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

            <div class="jarviswidget jarviswidget-color-blueDark" data-widget-editbutton="false">
                <header>
                    <span class="widget-icon"> <i class="fa fa-table"></i> </span>

                    <h2>MongoDB监控 </h2>

                </header>

                <div>

                    <!-- widget edit box -->
                    <div class="jarviswidget-editbox">
                        <!-- This area used as dropdown edit box -->
                    </div>
                    <!-- end widget edit box -->

                    <!-- widget content -->
                    <div class="well well-clean padding-bottom-0 padding-top-0 margin-bottom-0">
                        <div class="row">
                            <div class="col-xs-12 col-sm-6 col-md-6" style="padding-left: 0;">
                                <div class="panel panel-primary">
                                    <div class="panel-heading">
                                        <h3 class="panel-title">基本信息</h3>
                                    </div>
                                    <div class="panel-body no-padding text-align-center">
                                        <table class="table table-bordered">
                                            <tr>
                                                <td width="30%">
                                                    数据库地址
                                                </td>
                                                <td width="70%" id="mongodbHost">
                                                </td>
                                            </tr>
                                            <tr class="active">
                                                <td>
                                                    数据库端口
                                                </td>
                                                <td>
                                                    <span class="label label-primary" id="mongodbPort"></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    进程名
                                                </td>
                                                <td id="mongodbProcess">
                                                </td>
                                            </tr>
                                            <tr class="active">
                                                <td>
                                                    版本
                                                </td>
                                                <td>
                                                    <span class="badge bg-color-greenLight" id="mongodbVersion"></span>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                    <div class="panel-footer text-align-right">
                                        <a id="mongodbRelMem" href="javascript:void(0);" class="btn btn-success"><i
                                                class="fa fa-deaf"></i>
                                            释放内存</a>
                                        <a id="mongodbRelDisk" href="javascript:void(0);" class="btn btn-info"><i
                                                class="fa fa-trash"></i> 释放磁盘</a>
                                        <a id="mongodbRestart" href="javascript:void(0);" class="btn btn-danger"><i
                                                class="fa fa-play-circle"></i>
                                            重启</a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-6" style="padding-right: 0;">
                                <div class="panel panel-success">
                                    <img id="mongodbPng" src="${ctx}/static/img/status-error.png" class="ribbon">
                                    <div class="panel-heading">
                                        <h3 class="panel-title">
                                            状态信息</h3>
                                    </div>
                                    <div class="panel-body no-padding text-align-center">
                                        <table class="table table-bordered">
                                            <tr>
                                                <td width="30%">
                                                    运行状态
                                                </td>
                                                <td width="70%">
                                                    <span class="badge bg-color-greenLight" id="mongodbStatus"></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td width="30%">
                                                    运行时间
                                                </td>
                                                <td width="70%" id="mongodbUptime">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td valign="middle">
                                                    连接信息
                                                </td>
                                                <td rowspan="2" id="mongodbLink">
                                                    <div class="easy-pie-chart txt-color-orangeDark" data-percent="33"
                                                         data-pie-size="50">
                                                        <span class="percent percent-sign">35</span>
                                                    </div>
                                                <span class="easy-pie-title"> 可用连接趋势 <i
                                                        class="fa fa-caret-up icon-color-bad"></i> </span>
                                                    <ul class="smaller-stat hidden-sm pull-right">
                                                        <li>
                                                        <span class="label bg-color-greenLight"><i
                                                                class="fa fa-caret-up"></i> 98%</span>
                                                        </li>
                                                        <li>
                                                        <span class="label bg-color-blueLight"><i
                                                                class="fa fa-caret-down"></i> 24%</span>
                                                        </li>
                                                    </ul>
                                                </td>
                                            </tr>

                                        </table>
                                    </div>
                                    <div class="panel-footer text-align-right">
                                        <a id="mongodbRefresh" href="javascript:void(0);" class="btn btn-success"><i
                                                class="fa fa-refresh"></i>
                                            刷新</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <!-- Widget ID (each widget will need unique ID)-->
                            <div class="jarviswidget jarviswidget-color-blueLight" data-widget-fullscreenbutton="true">
                                <header>
                                    <span class="widget-icon"> <i class="fa fa-line-chart"></i> </span>
                                    <h2>MongoDB 统计信息</h2>
                                    <div class="widget-toolbar no-padding">

                                        <select name="type" id="collType" rel="tooltip" data-placement="top"
                                                data-original-title="统计的级别">
                                            <option value="1">内存</option>
                                            <option value="2">连接</option>
                                            <option value="3">读写流量</option>
                                            <option value="4">操作数</option>
                                            <option value="5">加载错误</option>
                                            <option value="6">索引</option>
                                            <option value="7">网络请求</option>
                                        </select>

                                    </div>
                                </header>

                                <!-- widget div-->
                                <div>
                                    <!-- widget content -->
                                    <div class="widget-body">
                                        <!-- widget body text-->
                                        <div id="mongodbChart" style="height: 300px;">
                                        </div>
                                        <!-- end widget body text-->
                                    </div>
                                    <!-- end widget content -->

                                </div>
                                <!-- end widget div -->

                            </div>
                            <!-- end widget -->
                        </div>
                        <div class="row">
                            <!-- Widget ID (each widget will need unique ID)-->
                            <div class="jarviswidget jarviswidget-color-blueLight" data-widget-colorbutton="false"
                                 data-widget-editbutton="false" data-widget-togglebutton="false"
                                 data-widget-deletebutton="false" data-widget-custombutton="false">
                                <header>
                                    <span class="widget-icon"> <i class="fa fa-bars"></i> </span>
                                    <h2> Mongodb 进程信息</h2>
                                </header>

                                <!-- widget div-->
                                <div>
                                    <!-- widget content -->
                                    <div class="widget-body no-padding">
                                        <!-- widget body text-->
                                        <div id="mongodbTable">
                                        </div>
                                        <!-- end widget body text-->
                                    </div>
                                    <!-- end widget content -->
                                </div>
                                <!-- end widget div -->
                            </div>
                            <!-- end widget -->
                        </div>
                    </div>

                </div>
            </div>

        </article>
        <!-- WIDGET END -->
    </div>
    <!-- end row -->
</section>
<!-- end widget grid -->

<script type="text/javascript">

    /* DO NOT REMOVE : GLOBAL FUNCTIONS!
     *
     * pageSetUp(); WILL CALL THE FOLLOWING FUNCTIONS
     *
     * // activate tooltips
     * $("[rel=tooltip]").tooltip();
     *
     * // activate popovers
     * $("[rel=popover]").popover();
     *
     * // activate popovers with hover states
     * $("[rel=popover-hover]").popover({ trigger: "hover" });
     *
     * // activate inline charts
     * runAllCharts();
     *
     * // setup widgets
     * setup_widgets_desktop();
     *
     * // run form elements
     * runAllForms();
     *
     ********************************
     *
     * pageSetUp() is needed whenever you load a page.
     * It initializes and checks for all basic elements of the page
     * and makes rendering easier.
     *
     */
    pageSetUp();

    /*
     * ALL PAGE RELATED SCRIPTS CAN GO BELOW HERE
     */
    // PAGE RELATED SCRIPTS
    // pagefunction
    var pagefunction = function () {

        /**
         * 刷新
         */
        function refresh() {
            // 获取mongodb当前信息
            $.ajax({
                url: '${ctx}/monitors/mongodb/current',
                type: 'post',
                dataType: 'json',
                success: function (data) {
                    if (data) {
                        var status = data.status;
                        if (status) {
                            $('#mongodbPng').attr('src', "${ctx}/static/img/status-ok.png");
                        } else {
                            $('#mongodbPng').attr('src', "${ctx}/static/img/status-error.png");
                        }
                        $('#mongodbHost').html(data.host);
                        $('#mongodbPort').html(data.port);
                        $('#mongodbVersion').html(data.version);
                        $('#mongodbProcess').html(data.process);
                        $('#mongodbStatus').html(status ? '正常' : '异常');
                        $('#mongodbUptime').html(data.hostName);
                        var v = Math.round(data.connectionsCurrent * 100 / (data.connectionsAvailable + data.connectionsCurrent));
                        $('#mongodbLink').find('.easy-pie-chart').data('easyPieChart').update(v);
                        $('#mongodbLink').find('.percent-sign').html(v);
                        runAllCharts();
                    }
                }
            });
        }

        refresh();

        // 刷新
        $('#mongodbRefresh').on('click', function () {
            refresh();
        });
        // 释放内存
        $('#mongodbRelMem').on('click', function () {
            ajaxCoomand({
                url: '${ctx}/monitors/mongodb/releaseMemory',
                callback: function () {
                    refresh();
                }
            });
        });
        // 释放硬盘
        $('#mongodbRelDisk').on('click', function () {
            ajaxCoomand({
                url: '${ctx}/monitors/mongodb/releaseDisk',
                callback: function () {
                    refresh();
                }
            });
        });
        // 重启
        $('#mongodbRestart').on('click', function () {
            ajaxCoomand({
                url: '${ctx}/monitors/mongodb/restart',
                callback: function () {
                    refresh();
                }
            });
        });

        // 初始化图表选择
        var $type = $('#collType');
        $type.select2({
            width: 200
        });
        // action
        $type.on('change', function () {
            var params = {
                type: 1,
                formatType: 'flow',
                title: 'Mongodb内存使用趋势图',
                legends: ['物理内存', '虚拟内存', '映射内存', '日志映射内存']
            };

            var type = $type.val();
            if (type == 2) {
                params = {
                    type: 2,
                    formatType: 'package',
                    title: 'Mongodb连接趋势图',
                    legends: ['当前连接数', '可用连接数']
                };
            } else if (type == 3) {
                params = {
                    type: 3,
                    formatType: 'flow',
                    title: 'Mongodb流量趋势图',
                    legends: ['网络读取流量', '网络发送流量']
                };
            } else if (type == 4) {
                params = {
                    type: 4,
                    formatType: 'package',
                    title: 'Mongodb操作趋势图',
                    legends: ['插入操作', '查询操作', '更新操作', '删除操作', '其它操作']
                };
            } else if (type == 5) {
                params = {
                    type: 5,
                    formatType: 'package',
                    title: 'Mongodb加载错误数趋势图',
                    legends: ['加载磁盘内容页错误']
                };
            } else if (type == 6) {
                params = {
                    type: 6,
                    formatType: 'package',
                    title: 'Mongodb索引数趋势图',
                    legends: ['访问索引', '内存命中索引', '内存丢失索引', '计数器重置']
                };
            } else if (type == 7) {
                params = {
                    type: 7,
                    formatType: 'package',
                    title: 'Mongodb网络请求数趋势图',
                    legends: ['网络请求数']
                };
            }

            initChart(params);
        });

        <!-- chart libraries start -->
        loadScript("/static/js/plugin/echarts/echarts.min.js", function () {
            loadScript("/static/js/plugin/echarts/macarons.js", function () {
                loadScript("/static/js/extend/chartData.js", function () {
                    initChart();
                });
            });
        });
        // 初始化chart
        var mongodbChart = null;

        function initChart(params) {

            // 先销毁旧的
            if (mongodbChart && mongodbChart.getChart() && mongodbChart.getChart().dispose) {
                mongodbChart.getChart().dispose();
            }
            if (params == null || params == undefined) {
                params = {
                    type: 1,
                    formatType: 'flow',
                    title: 'Mongodb内存使用趋势图',
                    legends: ['物理内存', '虚拟内存', '映射内存', '日志映射内存']
                };
            }
            // init
            mongodbChart = new ChartData({
                // dom节点
                databind: $('#mongodbChart').get(0),
                type: 'line',
                dataurl: '${ctx}/monitors/mongodb/chartData',
                params: {type: params.type},
                title: params.title,
                legends: params.legends,
                formatType: params.formatType,
                config: {
                    dataZoom: [{
                        end: 10
                    }, {
                        end: 10,
                        show: true
                    }]
                }
            });
        }

        // 初始化db表
        new DataTableData({
                    databind: $('#mongodbTable').get(0),
                    //数据请求url地址
                    dataurl: '${ctx}/monitors/mongodb/dbList',
                    hasCache: false,
                    hasIndex: false,
                    info: false,
                    alls: true,
                    toolbarStates: {
                        "add": {show: false},
                        "edit": {show: false},
                        "delete": {show: false}
                    },
                    columns: [
                        {data: 'dbName', title: '数据库名称', "defaultContent": ''},
                        {
                            data: 'status', title: '数据库状态', "defaultContent": '',
                            render: function (value) {
                                return '<div class="text-center"><span class="label label-primary">' + (value ? '正常' : '异常') + '</span></div>';
                            }
                        },
                        {
                            data: 'collections', title: '集合数', "defaultContent": '0',
                            render: function (value) {
                                return '<div class="text-center"><span class="badge bg-color-greenLight">' + value + '</span></div>';
                            }
                        },

                        {
                            data: 'objects', title: '记录数',
                            render: function (value) {
                                return '<div class="text-center">' + packetTransform(value) + '</div>';
                            }
                        },
                        {
                            data: 'dataSize', title: '记录的总大小',
                            render: function (value) {
                                return '<div class="text-center"><span class="label label-default">' + packetTransform(value) + '</span></div>';
                            }
                        },
                        {
                            data: 'indexes', title: '索引数',
                            render: function (value) {
                                return '<div class="text-center">' + packetTransform(value) + '</div>';
                            }
                        },
                        {
                            data: 'numExtents', title: '事件数',
                            render: function (value) {
                                return '<div class="text-center">' + packetTransform(value) + '</div>';
                            }
                        },
                        {
                            data: 'fileSize', title: '文件大小',
                            render: function (value) {
                                return '<div class="text-center">' + flowTransform(value) + '</div>';
                            }
                        }
                    ],
                    hasDetails: true,
                    /**
                     details: '<div>Drop click this</div>',
                     */
                    details: function (row, $div) {
                        //覆盖传入模式
                        var suboptions = {
                            //默认table配置项，需要修改则覆盖
                            serverSide: true,
                            searching: false,
                            paging: false,
                            hasCache: false,
                            hasSelect: false,
                            hasIndex: true,
                            info: false,
                            alls: true,
                            showToolbar: false,
                            datas: [], //[｛name:'John',position:'china'｝]
                            columns: [],
                            dom: 't'
                        };

                        //必须项目
                        //远程模式则按照DataTable配置
                        suboptions.databind = $div.get(0);
                        suboptions.dataurl = '${ctx}/monitors/mongodb/collList';
                        //数据请求参数
                        suboptions.params = {
                            dbName: row['dbName']
                        };
                        suboptions.columns = [
                            {data: 'collName', title: 'Collection名称', "defaultContent": ''},
                            {
                                data: 'status', title: '状态', "defaultContent": '',
                                render: function (value) {
                                    return '<div class="text-center"><span class="label label-primary">' + (value ? '正常' : '异常') + '</span></div>';
                                }
                            },
                            {data: 'ns', title: '命名空间', "defaultContent": ''},
                            {
                                data: 'count', title: '记录数',
                                render: function (value) {
                                    return '<div class="text-center">' + packetTransform(value) + '</div>';
                                }
                            },
                            {
                                data: 'size', title: '记录的总大小',
                                render: function (value) {
                                    return '<div class="text-center"><span class="label label-default">' + packetTransform(value) + '</span></div>';
                                }
                            },
                            {
                                data: 'indexes', title: '索引数',
                                render: function (value) {
                                    return '<div class="text-center">' + packetTransform(value) + '</div>';
                                }
                            },
                            {
                                data: 'numExtents', title: '事件数',
                                render: function (value) {
                                    return '<div class="text-center">' + packetTransform(value) + '</div>';
                                }
                            }
                        ];
                        return new DataTableData(suboptions);
                    }
                }
        );
    };

    // destroy generated instances
    // pagedestroy is called automatically before loading a new page
    // only usable in AJAX version!
    var pagedestroy = function () {
        // 销毁
    };
    // end destroy

    // load related plugins
    loadScript("/static/js/plugin/datatables/jquery.dataTables.js", function () {
        loadScript("/static/js/plugin/datatables/dataTables.colVis.js", function () {
            loadScript("/static/js/plugin/datatables/dataTables.tableTools.js", function () {
                loadScript("/static/js/plugin/datatables/dataTables.bootstrap.js", function () {
                    loadScript("/static/js/plugin/datatable-responsive/datatables.responsive.js", function () {
                        loadScript("/static/js/extend/DataTableData.js", pagefunction);
                    });
                });
            });
        });
    });

</script>